<template>
  <div class="container container_login ">
    <div class="login-wrap">
      <div class="login-left">
        <div class="login-ad"><img src="../../static/img/login_left.png" /></div>
      </div>
      <div class="login-right">
        <div class="forget-pwd">
          <div class="s_back" @click="switchLogin()" >
            <img class="fl" src="static/img/back.png" height="30" />
          </div>
          <div class="login-title">忘记密码</div>

          <div class="login-con">
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="phone" placeholder="请输入手机号">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-person.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="code" placeholder="请输入验证码" style="width:255px">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
                <el-button type="primary" :class="['code-btn', disabled ? 'el-button-code-disabled' : '']" @click="bindSendCode" :disabled="disabled">{{ btnTitle }}</el-button>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="password" placeholder="请输入密码,至少6个字符" show-password>
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="confirmPwd" placeholder="确认密码" show-password>
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
              </div>
            </div>
            <!-- <div class="con-item"><div class="item-switch" @click="switchLogin()">切换登录</div></div> -->
            <div class="con-item">
              <div class="item-tip" v-if="isTip">{{ tipMsg }}</div>
            </div>
            <div class="con-item"><el-button class="login-btn" type="primary" @click="confirm">修改并登录</el-button></div>
          </div>
        </div>
      </div>
    </div>
    <Copyright />
  </div>
</template>
<script>
import Copyright from '../components/copyright.vue';
import Header from '../components/header';
export default {
  components: { Copyright },
  data() {
    return {
      tipMsg: '',
      btnTitle: '获取验证码',
      disabled: false,
      phone: '',
      code: '',
      password: '',
      confirmPwd: '',
      checked: false,
      isTip: true,
      seconds: 60
    };
  },
  created() {},
  methods: {
    confirm() {
      if (this.phone == '') {
        this.$message({
          message: '请输入手机号',
          type: 'warning'
        });
        return;
      }
      if (!/(^1[0-9]{10}$)/.test(this.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        });
        return;
      }
      if (this.code == '') {
        this.$message({
          message: '请输入验证码',
          type: 'warning'
        });
        return;
      }
      if (this.password != this.confirmPwd) {
        this.$message({
          message: '两次密码不一致',
          type: 'warning'
        });
        return;
      }
      let formData = {
        mobile: this.phone,
        captcha: this.code,
        newpassword: this.password,
        type: 'mobile'
      };
      this.$api('login.resetpwd', formData).then(res => {
        if (res.code == 1) {

         if (!localStorage.getItem('schoolInfo')) {
            this.$api('index.getLogo', {token: res.data.userInfo.token}).then(res => {
              this.schoolInfo = res.data;
              localStorage.setItem('schoolInfo', JSON.stringify(res.data));
            });
          }
          localStorage.setItem('token', res.data.userInfo.token);
          this.$api('user.getuser', { token: res.data.userInfo.token}).then(resUser => {
            localStorage.setItem('userInfo', JSON.stringify(resUser.data));
            this.$api('index.userauth', { token: res.data.userInfo.token }).then(resUserAuth => {
                this.$message.success('修改成功，登录成功');
                this.clearCookie()
              this.$router.push(resUserAuth.data.jump_path);
              localStorage.setItem('userAuth', JSON.stringify(resUserAuth.data));
            });
          });

          // this.$router.push('/');
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });

      //  console.log("修改成功，登录成功")
      this.isTip = true;
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie = 'userName' + '=' + c_name + ';path=/;expires=' + exdate.toGMTString();
      window.document.cookie = 'userPwd' + '=' + c_pwd + ';path=/;expires=' + exdate.toGMTString();
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie('', '', -1); //修改2值都为空，天数为负1天就好了
    },
    switchLogin() {
      this.$router.push('/');
    },
    bindSendCode() {
      if (!/(^1[0-9]{10}$)/.test(this.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        });
        return;
      }
      this.disabled = true;
      this.btnTitle = '请稍候...';

        this.doLoop();


      let formData = {
        mobile: this.phone,
        event: 'resetpwd'
      };
      this.$api('login.sms', formData).then(res => {
        if (res.code == 1) {
          console.log(res);
          this.$message.success('已发送验证码，请查收');


        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
          this.seconds = 0;
          this.disabled = false;
          this.btnTitle = '获取验证码';
        }
      });
    },
    doLoop() {
      this.seconds = 60;
      let countdown = setInterval(() => {
        if (this.seconds == 0 || this.disabled == false) {
          clearInterval(countdown);
          this.disabled = false;
          this.btnTitle = '获取验证码';
        } else {
          this.btnTitle = this.seconds + '秒后重试';
          this.seconds--;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.forget-pwd{ position: relative;}
.s_back{ line-height: 50px; cursor: pointer;
  width: 130px;
  height: 50px;
  background: #FFFFFF;
  // border: 1px solid #F5F5F5;
  
  opacity: 1;
  border-radius: 10px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #222222;
  position: absolute;
  left: 60px; top: 35px;
}
.s_back img{ margin: 10px; margin-right: 20px; }
</style>
